import { useEffect, useState } from "react";
import style from "./index.module.css";
import request from "../../api/request";
import { useParams, useNavigate } from "react-router-dom";
import Navbar from "../../compoents/Navbar";

// 定义文章详情数据类型
interface ArticleDetail {
  texttitle: string;
  texttype: string;
  textaudio: string;
  textdise: string;
  doctorimage: string;
  doctorname: string;
  doctorstate: string;
  textcount: number;
  textdatetime: string;
  socolv?: string;
  doctoradministre?: string;
  socostate?: string;
  socodescword?: string;
}

function Index() {
  const { id } = useParams();
  console.log(id);
  const navigate = useNavigate();

  // 获取文章详情
  const [artDetail, setArtDetail] = useState<ArticleDetail[]>([]);

  useEffect(() => {
    const getArtDetail = async () => {
      const res = await request.get("/api/book/detail", {
        params: {
          id: id,
        },
      });
      console.log("文章详情", res);
      if (
        (res as unknown as { code: number; data: ArticleDetail[] }).code ===
        20000
      ) {
        setArtDetail(
          (res as unknown as { code: number; data: ArticleDetail[] }).data
        );
      }
    };
    getArtDetail();
  }, [id]);
  return (
    <div>
      <Navbar title="文章详情" showBack onBack={() => navigate(-1)} />

      <div className={style.content}>
        {artDetail.map((item, index) => (
          <div key={index} className={style.articleItem}>
            {/* 视频播放器 - 根据texttype类型控制显示 */}
            {item.texttype !== "文章" && item.textaudio && (
              <div className={style.videoContainer}>
                <video
                  className={style.video}
                  controls
                  preload="metadata"
                  poster={item.texttype === "语音" ? "" : item.doctorimage} // 语音类型不使用头像做封面
                >
                  <source src={item.textaudio} type="video/mp4" />
                  <source src={item.textaudio} type="video/webm" />
                  您的浏览器不支持视频播放
                </video>
              </div>
            )}

            {/* 文章标题 */}
            <h2 className={style.title}>{item.texttitle}</h2>

            {/* 作者信息 */}
            <div>
              <div className={style.authorInfo}>
                <img
                  src={item.doctorimage}
                  alt="作者头像"
                  className={style.authorAvatar}
                />

                <div>
                  <div className={style.authorDetails}>
                    <span className={style.authorName}>{item.doctorname}</span>
                    <span className={style.authorTitle}>
                      {item.doctorstate}
                    </span>
                    <span className={style.authorTitle2}>{item.socolv}</span>
                  </div>

                  <div className={style.authorInfo2}>
                    <span>{item.doctoradministre}</span>
                    <span>{item.socostate}</span>
                  </div>
                </div>
              </div>
            </div>

            {/* 文章内容 */}
            <div className={style.content}>
              <p className={style.description}>{item.socodescword}</p>
            </div>

            {/* 统计信息 */}
            <div className={style.stats}>
              <span>发布时间: {item.textdatetime}</span>
              <span>浏览: {item.textcount || 0}</span>
            </div>

            <p className={style.statsart}>
              友情提示:以上内容仅供参考，具体诊疗请遵循医生指导。妙手医生版权所有，未经许可不得转载
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Index;
